<template>
	<div class="breadcrumb">
		<span class="breadcrumb-start">您当前的位置 &gt; </span>
		<el-breadcrumb separator=">">
			<el-breadcrumb-item v-for="(v, i) in navs" :key="v.path">
				<span v-if="i === navs.length - 1" class="no-link">{{ v.meta.menu }}</span>
				<a v-else @click.prevent="handleRoute(v)">{{ v.meta.menu }}</a>
			</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script>
	export default {
		name: 'breadcrumb',
		inheritAttrs: false,
		data() {
			return {
				navs: null
			};
		},
		computed: {},
		watch: {
			$route() {
				this.loadRoute();
			}
		},
		created() {
			this.loadRoute();
		},
		methods: {
			loadRoute() {
				const matched = this.$route.matched;
				this.navs = matched.filter(item => item.meta && item.meta.menu && !item.meta.noBreadcrumb);
			},
			handleRoute({ path }) {
				this.$router.push(path)
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '~_s/variables';

	// @import '~_s/placeholders';
	.breadcrumb {
		display: flex;
		align-items: center;
		font-size: $font-size-medium;
		color: $color-text-regular;
		padding: 10px;

		::v-deep .el-breadcrumb {
			display: inline-block;
			margin-left: 8px;

			.el-breadcrumb__inner a {
				font-weight: normal;
				color: $color-text-regular;
			}

			.no-link {
				color: $color-text-regular;
				cursor: text;
			}
		}
	}
</style>
